<!doctype html>
<html lang="zh-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>hisen——VUE UI组件库</title>

</head>
<style>
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }


    :root {
        --button-height: 32px;
        --font-size: 14px;
        --button-bg: white;
        --button-active-bg: #eee;
        --border-radius: 4px;
        --color: #333;
        --border-color: #999;
        --border-color-hover: red;
    }

    #app {
        /*margin: 20px;*/
    }

    body {
        font-size: var(--font-size);
    }

    .box {
        margin: 20px;
    }
    .demo{
        /*border:1px solid #666;*/
        min-height:100px;
    }
    .sider {
        background: #d5dce5;
        width: 200px;
    }
    .header{
        background:#b5c0cf;
        height: 100px;
    }
    .content{
        background:#eaeef2;
    }
    .footer{
        background:#ccc;
        height: 50px;
    }



</style>
<body>
<div id="app">

<!--    Toast-->
    <button @click="showToast1">top</button>
    <button @click="showToast2">middle</button>
    <button @click="showToast3">bottom</button>
<!--    <h-toast></h-toast>-->
<!--    上中下布局-->
<!--    <h-layout style="height:100vh">-->
<!--        <h-header class="demo">Header</h-header>-->
<!--        <h-content class="demo">Content</h-content>-->
<!--        <h-footer class="demo">Footer</h-footer>-->
<!--    sider布局-->
<!--    <h-layout style="height:100vh">-->
<!--        <h-header class="demo">Header</h-header>-->
<!--        <h-layout>-->
<!--            <h-sider class="demo">Sider</h-sider>-->
<!--            <h-content class="demo">Content</h-content>-->
<!--        </h-layout>-->
<!--        <h-footer class="demo">Footer</h-footer>-->
<!--    </h-layout>-->
    <!--    sider布局 放外面-->
<!--    <h-layout style="height:100vh">-->
<!--        <h-sider class="demo">Sider</h-sider>-->
<!--        <h-layout class="demo">-->
<!--            <h-header class="demo">Header</h-header>-->

<!--            <h-content class="demo">Content</h-content>-->
<!--            <h-footer class="demo">Footer</h-footer>-->
<!--        </h-layout>-->

<!--    </h-layout>-->
    <!--    <h-row>-->
    <!--        <h-col span="23" offset="1" :narrow-pc="{span:12,offset:12 }">-->
    <!--            <div class="demo"></div>-->
    <!--        </h-col>-->
    <!--    </h-row>-->
    <!--    <h-row>-->
    <!--        <h-col span="24" :ipad="{span:12}" :narrow-pc="{span:8}">-->
    <!--            <div class="demo"></div>-->
    <!--        </h-col>-->
    <!--        <h-col span="24" :ipad="{span:12}" :narrow-pc="{span:8}">-->
    <!--            <div class="demo"></div>-->
    <!--        </h-col>-->
    <!--        <h-col span="24" :ipad="{span:12}" :narrow-pc="{span:8}">-->
    <!--            <div class="demo"></div>-->
    <!--        </h-col>-->
    <!--        <div class="demo"></div>-->
    <!--        <h-col span="24" :ipad="{span:12}" :narrow-pc="{span:8}">-->
    <!--        </h-col>-->
    <!--        <h-col span="24" :ipad="{span:12}" :narrow-pc="{span:8}">-->
    <!--            <div class="demo"></div>-->
    <!--        </h-col>-->
    <!--        <h-col span="24" :ipad="{span:12}" :narrow-pc="{span:8}">-->
    <!--            <div class="demo"></div>-->
    <!--        </h-col>-->
    <!--    </h-row>-->
    <!--    <div class="box" style="border: 1px solid black">-->
    <!--        <h-row gutter="20">-->
    <!--            <h-col span="12"-->
    <!--                   :ipad="{span:8}"-->
    <!--                   :narrow-pc="{span:4}"-->
    <!--                   :pc="{span:2}"-->
    <!--                   :wide-pc="{span:1}"-->
    <!--            >-->
    <!--                2-->
    <!--            </h-col>-->
    <!--            <h-col span="12"-->
    <!--                   :ipad="{'span':16}"-->
    <!--                   :narrow-pc="{span:20}"-->
    <!--                   :pc="{span:22}"-->
    <!--                   :wide-pc="{span:23}"-->
    <!--            >2-->
    <!--                2-->
    <!--            </h-col>-->
    <!--        </h-row>-->
    <!--        <h-row>-->
    <!--            <h-col>12</h-col>-->
    <!--            <h-col>12</h-col>-->
    <!--        </h-row>-->
    <!--        <h-row>-->
    <!--            <h-col>8</h-col>-->
    <!--            <h-col>8</h-col>-->
    <!--            <h-col>8</h-col>-->
    <!--        </h-row>-->
    <!--        <h-row>-->
    <!--            <h-col>6</h-col>-->
    <!--            <h-col>6</h-col>-->
    <!--            <h-col>6</h-col>-->
    <!--            <h-col>6</h-col>-->
    <!--        </h-row>-->
    <!--        <h-row>-->
    <!--            <h-col span="2">2</h-col>-->
    <!--            <h-col span="22">22</h-col>-->
    <!--        </h-row>-->
    <!--        <h-row>-->
    <!--            <h-col span="1">2</h-col>-->
    <!--            <h-col span="20" offset="3">20</h-col>-->
    <!--        </h-row>-->
    <!--        <h-row>-->
    <!--            <h-col span="3">3</h-col>-->
    <!--            <h-col span=9 offset="1">9</h-col>-->
    <!--            <h-col span="10" offset="1">10</h-col>-->
    <!--        </h-row>-->
    <!--        <h-row gutter="20">-->
    <!--            <h-col>8</h-col>-->
    <!--            <h-col>8</h-col>-->
    <!--            <h-col>8</h-col>-->
    <!--        </h-row>-->
    <!--        <h-row gutter="40">-->
    <!--            <h-col>12</h-col>-->
    <!--            <h-col>12</h-col>-->
    <!--        </h-row>-->
    <!--    </div>-->
    <!--    <div class="box">-->
    <!--        <h-input value="正常状态"></h-input>-->
    <!--        <h-input value="禁止状态" :disabled="true"></h-input>-->
    <!--        <h-input value="只读状态" :readonly="true"></h-input>-->
    <!--        <h-input value="xx" v-model="message"></h-input>-->
    <!--        <p>{{message}}</p>-->
    <!--    </div>-->
    <!--&lt;!&ndash;    Input&ndash;&gt;-->
    <!--    <div class="box">-->
    <!--        <h-input value="张三" error="姓名不能少于两个字" @change="inputChange"></h-input>-->
    <!--    </div>-->
    <!--&lt;!&ndash;    Button&ndash;&gt;-->
    <!--    <div class="box">-->
    <!--        <h-button :loading="loading1" @change="loading1=!loading1">-->
    <!--            设置-->
    <!--        </h-button>-->
    <!--        <h-button icon="setting" icon-position="left" :loading="loading2" @change="loading2=!loading2">-->
    <!--            设置-->
    <!--        </h-button>-->
    <!--        <h-button icon="setting" icon-position="right" :loading="loading3" @change="loading3=!loading3">-->
    <!--            设置-->
    <!--        </h-button>-->
    <!--        <h-button-group>-->
    <!--            <h-button icon="left">上一页</h-button>-->
    <!--            <h-button>更多</h-button>-->
    <!--            <h-button icon="right" icon-position="right">下一页</h-button>-->
    <!--        </h-button-group>-->
    <!--    </div>-->


</div>
<script src="./src/app.js"></script>
<!--<script src="//at.alicdn.com/t/font_1151469_bn3fk0u78i5.js"></script>-->
</body>
</html>
